<template>
  <my-header>
    {{ headerTitle }}
  </my-header>
  <router-view/>
  <my-tab></my-tab>
</template>

<script>
import MyHeader from '@/components/Header';
import MyTab from '@/components/Tab';

import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { computed, watch } from 'vue';

export default {
  name: 'App',
  components: {
    MyHeader,
    MyTab
  },
  setup () {
    const store = useStore(),
          router = useRouter(),
          state = store.state;

    router.push('/');
    console.log(router)

    watch(() => router.currentRoute.value.name, (value) => {
      store.commit('setHeaderTitle', value);
    })
    return {
      headerTitle: computed(() => state.headerTitle)
    }
  }
}
</script>

